<template>

  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
      :okButtonProps="{ class: {'jee-hidden': this.disableOk} }"
    :cancelButtonProps="{ class: {'jee-hidden': this.disableOk} }"
    cancelText="關閉">


    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>

    </template>

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">


        <a-row style="width: 100%;">
          <a-col :span="24/3">
            <a-form-model-item :label="$t('seek.seekSchool.titleNo')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="username">
              <a-input :placeholder="$t('seek.seekSchool.inputAdd')" disabled="disabled" v-model="model.consultationNo"
                       :readOnly="!!model.id"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24/3">
            <a-form-model-item :label="$t('seek.seekSchool.labelSeekerIdentity')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="seekerIdentity">
              <j-dict-select-tag v-model="model.seekerIdentity"
                                 :placeholder="$t('seek.seekSchool.seekerIdentity')" dictCode="seekerIdentity"/>
            </a-form-model-item>
          </a-col>

          <a-col :span="24/3">
            <a-form-model-item  :label="$t('seek.seekSchool.otherIdentity')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input :placeholder="$t('seek.seekSchool.otherIdentityInput')" :disabled="this.hasSeekerIdentity"  v-model="model.seekerIdentityOther"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row style="width: 100%;">


          <a-col :span="24/3">
            <a-form-model-item :label="$t('seek.seekSchool.labelMeans')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag v-model="model.means" :placeholder="$t('seek.seekSchool.selectMeans')" dictCode="means"/>
            </a-form-model-item>
          </a-col>

          <a-col :span="24/3">
            <a-form-model-item label="其他途徑" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input :disabled="this.hasMeans" :placeholder="$t('seek.seekSchool.inputOtherMeans')" v-model="model.meansOther"/>
            </a-form-model-item>
          </a-col>

          <a-col :span="24/3">
            <a-form-model-item :label="$t('seek.seekSchool.labelStudentName')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="studentName">
              <a-input :placeholder="$t('seek.seekSchool.inputStudentName')" v-model="model.studentName"/>
            </a-form-model-item>
          </a-col>
        </a-row>


        <a-row style="width: 100%;">


          <a-col :span="24/3">
            <a-form-model-item :label="$t('seek.seekSchool.studentSex')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="gender">
              <j-dict-select-tag v-model="model.gender" :placeholder="$t('seek.seekSchool.selectSex')" dictCode="sex"/>
            </a-form-model-item>
          </a-col>

          <a-col :span="24/3">
            <a-form-model-item label="出生日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="birthDate">
              <a-date-picker style="width: 100%"
                             :placeholder="$t('seek.seekSchool.selectBirthDate')" v-model="model.birthDate"
                             :format="dateFormat" :getCalendatContainer="node => node.parentNode"
              />
            </a-form-model-item>
          </a-col>


          <a-col :span="24/3">
            <a-form-model-item :label="$t('seek.seekSchool.grade')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="grade">
              <j-dict-select-tag v-model="model.grade" placeholder="請選擇年級" dictCode="grade"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row style="width: 100%;">
          <a-col :span="24/3">
            <a-form-model-item :label="$t('seek.seekSchool.schoolName')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="schoolName">
              <a-input :placeholder="$t('seek.seekSchool.inputSchoolName')" v-model="model.schoolName"/>
            </a-form-model-item>
          </a-col>

          <a-col :span="24/3">
            <a-form-model-item :label="$t('seek.seekSchool.consultationDate')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="consultationDate">
              <a-date-picker style="width: 100%"
                             :placeholder="$t('seek.seekSchool.consultationDateInput')" v-model="model.consultationDate"
                             :format="dateFormat" :getCalendatContainer="node => node.parentNode"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="24/3">
            <a-form-model-item :label="$t('seek.seekSchool.tel')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tel">
              <a-input :placeholder="$t('seek.seekSchool.inputTel')" v-model="model.tel"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row style="width: 100%;">
          <a-col :span="24/3">
            <a-form-model-item :label="$t('seek.seekSchool.isOpenCase')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isOpenCase">
              <j-dict-select-tag v-model="model.isOpenCase" :placeholder="$t('seek.seekSchool.selectIsOpenCase')"
                                 dictCode="isOpenCase"/>
            </a-form-model-item>
          </a-col>

          <a-col :span="24/3">
            <a-form-model-item :label="$t('seek.seekSchool.issueType')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="issueType">
<!--              <j-dict-select-tag v-model="model.issueType" :placeholder="$t('seek.seekSchool.inputIssueType')"-->
<!--                                 dictCode="issueType"/>-->
              <j-tree-dict parent-code="B04" v-model="model.issueType"  field="id" ></j-tree-dict>

            </a-form-model-item>
          </a-col>

<!--          <a-col :span="24/3">-->
<!--            <a-form-model-item label="問題編號" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--              <j-dict-select-tag v-model="model.issueNo" placeholder="請輸入問題編號"-->
<!--                                 :dictCode="this.type"/>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->

          <a-col :span="24/3">
            <a-form-model-item :label="$t('seek.seekSchool.issueProperty')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="issueProperty">
              <a-select v-model="model.issueProperty"
                        :placeholder="$t('seek.seekSchool.inputIssueProperty')" :getPopupContainer="(target) => target.parentNode">
                <a-select-option :value="1">待配置1</a-select-option>
                <a-select-option :value="2">待配置2</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>




<!--        <a-col :span="24/3">-->
<!--          <a-form-model-item label="問題編號" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--            <j-dict-select-tag v-model="model.issueNo" placeholder="請輸入問題編號"-->
<!--                               :dictCode="this.type"/>-->
<!--          </a-form-model-item>-->
<!--        </a-col>-->
        <a-row style="width: 100%">
           <a-col :span="24/3">
          <a-form-model-item :label="$t('seek.seekSchool.remark')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input :placeholder="$t('seek.seekSchool.inputRemark')" v-model="model.remark"/>
            </a-form-model-item>
         </a-col>
        </a-row>

        <a-form-model-item :label="$t('seek.seekSchool.labelContent')" :labelCol="labelColContent" :wrapperCol="wrapperColContent" >
          <a-textarea :rows="8" :placeholder="$t('seek.seekSchool.inputContent')" v-model="model.content"/>
        </a-form-model-item>


      </a-form-model>
    </a-spin>

    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm :title="$t('seek.seekSchool.giveUpEdit')" @confirm="handleCancel"
                    :okText="$t('seek.seekSchool.confirm')" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>

  </a-modal>
</template>

<script>
import moment from 'moment'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction } from '@/api/manage'
import { editSeekHelp, addSeekHelp } from '@/api/api'

import { disabledAuthFilter } from '@/utils/authFilter'
import { duplicateCheck } from '@/api/api'
import JTreeDict from '../../../components/jeecg/JTreeDict'
export default {
  name: 'SeekModel',
  components: {
    JTreeDict
  },
  data() {
    return {
      // departDisabled: false, //是否是我的部门调用该页面
      // roleDisabled: false, //是否是角色维护调用该页面
      // type:'please_issue',
      disableOk: true,
      hasSeekerIdentity: true,
      hasMeans: true,
      modalWidth: 800,
      drawerWidth: 700,
      modaltoggleFlag: true,
      confirmDirty: false,
      seekId: '', //保存用户id
      disableSubmit: false,
      dateFormat: 'YYYY-MM-DD',

      validatorRules: {
        // consultationNo: [{ required: true, message: this.$t('') },],
        // seekerName: [{ required: true, message: this.$t('seek.seekSchool.inputSeekName'), },],
        seekerIdentity: [{ required: true, message: this.$t('seek.seekSchool.seekerIdentity')  },],
        // seekerIdentityOther: [],
        means: [{ required: true, message: this.$t('seek.seekSchool.selectMeans')  },],
        meansOther: [ {pattern :/^.{0,50}$/ ,messgae :'其他方式不超過50個個字'} ],
        birthDate: [{ required: true, message: this.$t('seek.seekSchool.selectBirthDate')  },],
        tel: [{ required: true, message: '請輸入聯繫方式，不超過50個字',pattern :/^.{0,50}$/ }],
        studentName: [{ required: true, message: this.$t('seek.seekSchool.valiStudentName'),pattern: /^[\u4e00-\u9fa5 ]{2,20}$/  },],
        grade: [{ required: true, message: this.$t('seek.seekSchool.selectGrade')  },],
        gender: [{ required: true, message: this.$t('seek.seekSchool.selectSex')  },],
        consultationDate: [{ required: true, message: this.$t('seek.seekSchool.consultationDateInput')  },],
        schoolName: [{ required: true, message: '請輸入學校姓名，不超過50個字' ,pattern :/^.{0,50}$/  },],
        issueType: [{validator: this.validateIssueType}],
        issueProperty: [],
        content: [{pattern :/^.{0,2000}$/,message:'求助內容不超過2000個字'}],
        remark: [{pattern :/^.{0,200}$/,message:'備註不超過200個字'}],
        isOpenCase: [{ required: true, message: this.$t('seek.seekSchool.selectIsOpenCase')  },],
        roles: {},

      },
      departIdShow: false,
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },

      labelColContent:{
        xs: { span: 10 },
        sm: { span: 2 },
      },

      wrapperColContent: {
        xs: { span: 24 },
        sm: { span: 22 },
      },
      uploadLoading: false,
      confirmLoading: false,
      headers: {},
      url: {
        // fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",
        // userWithDepart: "/sys/user/userDepartList", // 引入为指定用户查看部门信息需要的url
        // UserId:"/sys/user/generateUserId", // 引入生成添加用户情况下的url
        // syncUserByUserName:"/act/process/extActProcess/doSyncUserByUserName",//同步用户到工作流
        // queryTenantList: '/sys/tenant/queryList'
      },
      tenantsOptions: [],
      rolesOptions: [],
      nextDepartOptions: [],
    }
  },

  watch: {
    'model.seekerIdentity': {
      handler: function (newVal) {
        if (newVal == 4) {

          this.hasSeekerIdentity = false
          console.log("求助者身份选择了其他,改变disable")
        } else {
          this.model.seekerIdentityOther=''
          this.hasSeekerIdentity = true
        }
      }
    },

    'model.means': {
      handler: function (newVal) {
        console.log('改變了', newVal)
        if (newVal == 5) {

          this.hasMeans = false
          console.log("路径选择了其他,改变disable")
        } else {
          this.model.meansOther=''
          this.hasMeans = true
        }
      }
    },

    'model.meansOther': {
      handler: function (newVal) {
        console.log('改變了其他路径')
      }
    },

    'model.issueType' :{
      handler: function (newVal){
        console.log("改變了"+newVal)

        // if (newVal==1){
        //   this.type='health_issue'
        // }else if(newVal == 2){
        //   this.type='school_issue'
        // }else if (newVal == 3){
        //   this.type='grop_issue'
        // }else if (newVal == 4){
        //   this.type='parents_issue'
        // }
        // else if (newVal == 5){
        //   this.type='friend_issue'
        // }
        // else if (newVal == 6){
        //   this.type='behavior_issue'
        // }
        // else if (newVal == 7){
        //   this.type='emotion_issue'
        // }
        // else if (newVal == 8){
        //   this.type='sex_issue'
        // }else if (newVal==9){
        //   this.type='other_issue'
        // }
        // else {
        //  this.type='please_issue'
        // }
      }
    }

    // 'model.tel':{
    //   handler:function(newVal){
    //     this.validatePhone(this.validatorRules,newVal,callback)
    //   }
    // }

  },

  created() {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token }
    // this.initRoleList()
    // this.initTenantList()
  },
  computed: {
    uploadAction: function () {
      return this.url.fileUpload
    }
  },
  methods: {
    add() {
      this.refresh()
      // this.edit({activitiSync:'1',userIdentity:1});
      this.edit({ activitiSync: '1' })
    },
    edit(record) {
      let that = this
      that.visible = true
      //根据屏幕宽度自适应抽屉宽度
      this.resetScreenSize()
      that.seekId = record.id

      that.model = Object.assign({}, { selectedroles: '', selecteddeparts: '' }, record)
      //身份为上级显示负责部门，否则不显示
      // if(this.model.userIdentity==2){
      //   this.departIdShow=true;
      // }else{
      //   this.departIdShow=false;
      // }

      // if(record.hasOwnProperty("id")){
      //   that.getUserRoles(record.id);
      //   that.getUserDeparts(record.id);
      // }
      console.log('that.model=', that.model)
    },
    isDisabledAuth(code) {
      return disabledAuthFilter(code)
    },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth
      } else {
        this.modalWidth = 800
      }
      this.modaltoggleFlag = !this.modaltoggleFlag
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 700
      }
    },
    refresh() {
      this.seekId = ''
      // this.nextDepartOptions = []
      // this.departIdShow = false
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false

      this.departIdShow = false
    },
    moment,
    handleSubmit() {
      console.log('提交的=====>',this.model)
      const that = this
      // 触发表单验证
      //這裡為啥不驗證
      this.$refs.form.validate(valid => {

        if (valid) {
          let obj
          console.log('seekModel====>', this.model)
          if (this.model.id != null) {
            obj = editSeekHelp(this.model)
          } else {
            console.log('添加的数据====》',this.model)
            obj = addSeekHelp(this.model)
          }

          obj.then((res) => {
            console.log(res)
            if (res.success) {
              that.$message.success(res.message)
              //使用自定義事件
              that.$emit('ok') //作用可能有刷新頁面

            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })

          // if(!this.model.id){
          //   this.model.id = this.userId;
          //   obj=addUser(this.model);
          // }else{
          //   obj=editUser(this.model);
          // }
          // obj.then((res)=>{
          //   if(res.success){
          //     that.$message.success(res.message);
          //     that.$emit('ok');
          //   }else{
          //     that.$message.warning(res.message);
          //   }
          // }).finally(() => {
          //   that.confirmLoading = false;
          //   that.close();
          // })
        } else {
          return false
        }
      })
    },
    //处理关闭事件
    handleCancel() {
      this.close()
    },


    validateIssueType(rule, value, callback){
      if(!value) {
        callback()
      }
     // console.log('选中了问题类型',value)
      if (value == 1483976826321596418
        || value == 1483980910311206914
        || value == 1483980955269951490
        || value == 1483980982646173698
        || value == 1483981182232129538
        || value == 1483981209411219458
        || value == 1483981243158589441
        || value == 1483981283704926210
        || value == 1483981309587976194
      ){
         console.log('选中了父类不符合要求==》',value)
         callback('這不允許選擇父節點，請選擇葉子節點')
      }else {
        callback()
      }
    }
  }
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}

.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>